<template>
  <!-- 歌单展示容器 -->
  <div class="musicList">
    <!-- 顶部标题区 -->
    <div class="musicTop">
      <div class="title">发现好歌单</div>  <!-- 主标题 -->
      <div class="more">查看更多</div>     <!-- 跳转入口 -->
    </div>

    <!-- 歌单滑动展示区 -->
    <div class="musicContent">
      <!-- Vant滑动组件配置：
           loop="false" 禁用循环滑动
           width="130" 单个滑块宽度
           show-indicators="false" 隐藏指示器 -->
      <van-swipe
        :loop="false"
        :width="130"
        class="my-swpie"
        :show-indicators="false"
      >
        <!-- 遍历音乐列表生成滑块 -->
        <van-swipe-item v-for="item in state.musicList" :key="item.id">
          <!-- 路由跳转到详情页，携带歌单ID参数 -->
          <router-link :to="{ path:'/itemMusic', query:{ id:item.id } }">
            <!-- 歌单封面图 -->
            <img 
              :src="item.picUrl" 
              alt="歌单封面"
              class="album-cover"
            />
            
            <!-- 播放量显示 -->
            <span class="playCount">
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-gl-play-copy"></use>
              </svg>
              <!-- 格式化播放量显示 -->
              {{ changeCount(item.playCount) }}
            </span>

            <!-- 歌单名称（最大显示2行） -->
            <span class="name line-clamp-2">{{ item.name }}</span>
          </router-link>
        </van-swipe-item>
      </van-swipe>
    </div>
  </div>
</template>
<script>
import { getMusicList } from "@/request/api/home.js";
import { reactive, onMounted } from "vue";
export default {
  //Vue2
  // data() {
  //   return {
  //     musicList: [],
  //   };
  // },
  // methods: {
  //   async getGnedan() {
  //     let res = await getMusicList();
  //     console.log(res);
  //     this.musicList = res.data.result;
  //   },
  //   changeCount: function (num) {
  //     if (num >= 100000000) {
  //       return (num / 100000000).toFixed(1) + "亿";
  //     } else if (num >= 10000) {
  //       return (num / 10000).toFixed(1) + "万";
  //     }
  //   },
  // },
  // mounted() {
  //   this.getGnedan();
  // },
  // Vue3
  setup() {
   // 响应式状态管理 ----------------------------------------------------------
    const state = reactive({
      musicList: [],
    });
    // 工具方法 --------------------------------------------------------------
    /**
     * 数字格式化方法
     * @param {number} num - 原始播放量
     * @returns {string} 格式化后的播放量字符串
     * 示例：
     *  - 123456789 → 1.2亿
     *  - 23456 → 2.3万
     * 注意：当前实现未处理小于10000的情况（显示原始数字）
     */
    function changeCount(num) {
      if (num >= 100000000) {
        return (num / 100000000).toFixed(1) + "亿";
      } else if (num >= 10000) {
        return (num / 10000).toFixed(1) + "万";
      }
    }
     // 生命周期钩子 
    onMounted(async () => {
        // 异步获取歌单数据
      let res = await getMusicList();
      console.log(res);
              // 更新响应式状态

      state.musicList = res.data.result;
    });
    return { state,changeCount };
  },
};
</script>
<style lang="less" scoped>
.musicList {
  width: 100%;
  height: 5rem;
  padding: 0.2rem;
  .musicTop {
    width: 100%;
    height: 0.6rem;
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.2rem;
    .title {
      font-size: 0.4rem;
      font-weight: 900;
    }
    .more {
      border: 1px solid #ccc;
      text-align: center;
      line-height: 0.6rem;
      padding: 0 0.2rem;
      border-radius: 0.4rem;
    }
  }
  .musicContent {
    width: 100%;
    height: 3.6rem;

    .van-swipe-item {
      //   margin-right: 0.14rem;
      padding-right: 0.2rem;
      position: relative;
      height: 3.8rem;
      img {
        width: 100%;
        height: 2.4rem;
        border-radius: 0.2rem;
        //   position: absolute;
      }
      .playCount {
        position: absolute;
        z-index: 100;
        right: 0.3rem;
        color: white;
        margin-top: 0.06rem;
        .icon {
          width: 0.3rem;
          height: 0.3rem;
        }
      }
      .name {
        //   position: absolute;
        bottom: 0px;
      }
    }
  }
}
</style>